<template>
	<view    class="content">
			
	
		
					
					<uni-card padding="0" spacing="0" >
						
						<view v-for="(value,key) in tableList">
						
							<uni-row class="demo-uni-row"  v-if="value.type===5">
								
								<uni-col :span="4">
									<label >{{value.name}}</label>
								
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<uni-grid :column="2" :show-border="false" :square="false" >
										<uni-grid-item v-for="url in imagesList" >
											
											<view class="grid-item-box">
												<image class="image" :src="imageUrl+url" mode="aspectFill"  @click="showImage(imageUrl+url)"/>
												
												
											</view>
										</uni-grid-item>
									</uni-grid>
								</uni-col>
							
							</uni-row>
							<uni-row class="demo-uni-row"  v-else-if="value.type===6">
								<uni-col :span="4">
									<label >{{value.name}}</label>
								
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<uni-grid :column="1" :show-border="false" :square="false">
										<uni-grid-item v-for="url in vedioList">
											<view class="grid-item-box">
												<video  :src="imageUrl+url"   ></video>
											</view>
										</uni-grid-item>
									</uni-grid>
								</uni-col>
							
							</uni-row>
							<uni-row class="demo-uni-row"  v-else-if="value.type===3">
								<uni-col :span="4">
									
									<label >{{value.name}}</label>
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<text v-for="val in value.content">{{val}}</text>
								</uni-col>
							
							</uni-row>
							<uni-row class="demo-uni-row"  v-else>
								<uni-col :span="4">
									<label >{{value.name}}</label>
								
								</uni-col>
								<uni-col :span="1">
									<text>：</text>
								</uni-col>
								<uni-col :span="19">
									<text>{{value.content}}</text>
								</uni-col>
							
							</uni-row>
						</view>
						
					
					</uni-card>
					<view style="height: 10px;"></view>
					<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" style="background-color: #fff;">
						<view class="popup-content">
							<view>
								<video v-if="!isImage" :src="bigVedio"   controls style="width:480px;height:480px;" ></video>
								<image v-if="isImage" style="width:480px;height:480px;"  :src="bigImage" mode="aspectFit"  />
								
							</view>
							<view>
								<button class="mini-btn"  type="default" size="mini" @click="hidePopup">关闭</button>
							</view>
							
							
						</view>
						
						
					</uni-popup>
		
	
	</view>
</template>

<script>
	import http from '@/store/http.js'
	import constant from '@/store/constant.js'
	
        export    default    {
                data() {
					return    {
						imageUrl:constant.baseImageUrl,
						tableList:[],
						imagesList:[
						
							],
						vedioList:[
							
							],
						isImage:true,
						bigImage:"",
						bigVedio:"",
					}
                },
                onLoad(option) {
					if(option !=undefined&&option.id !=undefined&&option.id.length>0){
						
						var self=this;
						http.get("/api/template/getRecordDetail?recordId="+option.id,(result)=>{
							
							if(result.status){
							
								var fieldArray=result.data.field;
								var length=fieldArray.length;
								var tableList=[];
								
								for(var i=0;i<length;i++){
									var field=fieldArray[i];
									
									
									var item= {
											id:field.id,
											type:field.type,
											name:field.name,
											// value:null,
											content:"",
											optionList:[]
										}
									switch(field.type){
										//文本和时间
										case 1:
										case 7:
											item.content=field.value;
											break;
										//单选和下拉
										case 2:
										case 4:
											for(var j=0;j<field.option.length;j++){
												if(field.option[j].id==field.value){
													item.content=field.option[j].name;
												}
											}
											
											break;
										//多选
										case 3:
											var valueList=JSON.parse(field.value);
											item.content=[];
											for(var j=0;j<field.option.length;j++){
												for(var k=0;k<valueList.length;k++){
													if(field.option[j].id==valueList[k]){
														
														item.content.push(field.option[j].name);
													}
												}
												
											}
											
											break;
										//图片
										case 5:
									
											self.$data.imagesList=JSON.parse(field.value);
											break;
										//视频
										case 6:
											self.$data.vedioList=JSON.parse(field.value);
											break;
									
									}
									if(field.option!=undefined){
										for(var j=0;j<field.option.length;j++){
											var optionItem={
												id:field.option[j].id,
												text: field.option[j].name,
												value: field.option[j].sort
											}
											item.optionList.push(optionItem);
										}
									}	
									tableList.push(item);
								}
								
								
								self.$data.tableList=tableList;
							}else{
								self.showContentToast(result.msg);
							}
							
						})
					}else{
						uni.redirectTo({
							url:"/pages/index/index"
						})
					}
						
						
                },
				onShow(){
					
					
				},
				
                methods: {
					hidePopup(){
						this.$refs.popup.close();
					},
					showImage(url){
						this.$data.isImage=true;
						this.$data.bigImage=url;
						this.$refs.popup.open()
					},
					showVideo(url){
						this.$data.isImage=false;
						this.$data.bigVedio=url;
						this.$refs.popup.open()
					},
					showContentToast(title){
						uni.showToast({
						  title: title,
						  icon: "none"
						})
					},
					showContentModal(title,content,callback){
						uni.showModal({
							title: title,
							content: content,
							success: function (res) {
								callback(res.confirm);
							}
						});
					},
                }
        }
</script>

<style    scoped>
      .demo-uni-row{
      	padding-left: 10px;
		padding-top: 5px;
		font-size: 16px;
      }
		
		.demo-uni-row {
			margin-bottom: 5px;
			/* QQ、抖音小程序文档写有 :host，但实测不生效 */
			/* 百度小程序没有 :host，需要设置block */
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
		}
		
		/* 支付宝小程序没有 demo-uni-row 层级 */
		/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
		/* #ifdef MP-ALIPAY || MP-WEIXIN */
		/deep/ .uni-row {
			margin-bottom: 10px;
		}
		/* #endif */
		
		.demo-uni-col {
			height: 36px;
			border-radius: 4px;
		}
		
		.dark_deep {
			background-color: #99a9bf;
		}
		
		.dark {
			background-color: #d3dce6;
		}
		
		.light {
			background-color: #e5e9f2;
		}
		
		
		
		.container {
				overflow: hidden;
			}
		
			.custom-cover {
				flex: 1;
				flex-direction: row;
				position: relative;
			}
		
			.cover-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 40px;
				background-color: rgba($color: #000000, $alpha: 0.4);
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 15px;
				font-size: 14px;
				color: #fff;
			}
		
			.card-actions {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 45px;
				border-top: 1px #eee solid;
				padding-top: 2px;
			}
			.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.card-actions-item-text {
				font-size: 14px;
				color: #666;
				margin-left: 5px;
			}
			.cover-image {
				flex: 1;
				height: 150px;
			}
			.no-border {
				border-width: 0;
			}
			
			.grid-item-box {
					flex: 1;
					
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px 0;
				}
				
			.image {
					width: 150px;
					height: 150px;
				}
				.popup-content {
						@include flex;
						align-items: center;
						justify-content: center;
						padding: 15px;
						height: 500px;
						width:500px;
						background-color: #fff;
						text-align: center;
					}
</style>